<template>
    <el-button plain @click="add()">添加</el-button>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="饮料ID" prop="beverageID" />
        <el-table-column label="饮料名称" prop="beverageName" />
        <el-table-column label="库存" prop="quantity" />
        <el-table-column label="入库日期" prop="entryDate" />
        <el-table-column align="right">
            <template #header>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-input v-model="search" placeholder="请输入饮料名称"/>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="chax()">查询</el-button>
                    </el-col>
                </el-row>
            </template>
            <template #default="scope">
                <el-button plain @click="bj(scope.row)">更新</el-button>
                <el-button plain @click="sc(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="zhonshul" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
    <!-- 模态框 -->
    <el-dialog v-model="dialogFormVisible" title="添加" width="500">
        <el-form :model="form">
            <el-form-item v-if="visible" label="订单编号" :label-width="formLabelWidth">
                <el-input v-model="form.inventoryID" autocomplete="off" />
            </el-form-item>

            <el-form-item label="饮料" :label-width="formLabelWidth">
                <el-select v-model="form.beverageName" placeholder="请选择酒水">
                    <el-option v-for="item in cities" :key="item.beverageID" :label="item.beverageName"
                        :value="item.beverageID" />
                </el-select>
            </el-form-item>
            <el-form-item label="库存" :label-width="formLabelWidth">
                <el-input v-model="form.quantity" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="tianjia()"> 确认 </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import axios from "axios";
const zhonshul = ref(0);
// 当前页码
const currentPage = ref(1);
//当前页数量
const pageSize = ref(5);
//查询名称
const search = ref("");

const cities = ref([]);

const filterTableData = ref([]);
const dialogFormVisible = ref(false);
const beverageID = ref();
const inventoryID = ref(0);
const form = ref({
    inventoryID: 0,
    beverageID: 1,
    entryDate: "2024-03-13T00:58:04.850Z",
    quantity: 0,
});
const form1 = ref({
    inventoryID: 0,
    beverageID: 0,
    entryDate: "2024-03-13T00:58:04.850Z",
    quantity: 0,
});
const xingbiao = ref({
    inventoryID: 0,
    beverageID: 0,
    entryDate: "2024-03-13T00:58:04.850Z",
    quantity: 0,
});
onMounted(() => {
    select();
    xlcx();
});
//查询
function select() {
    axios({
        method: "get",
        url: "https://localhost:7052/api/BeverageInven/GetData",
        params: {
            pageSize: pageSize.value,
            currentPage: currentPage.value,
            search: search.value,
        },
    }).then((res) => {
        zhonshul.value = res.data.totalCount;
        filterTableData.value = res.data.data;
        console.log(filterTableData.value);
    });
}
//下拉列表查询
function xlcx() {
    axios({
        method: "get",
        url: "https://localhost:7052/api/BeverageInven/GetDropdownList",
    }).then((res) => {
        cities.value = res.data;
        console.log(cities.value);
    });
}
//查询按钮
function chax() {
    select();
}
//添加按钮
function add() {
    dialogFormVisible.value = true;
    form.value = form1.value;
    cities.beverageName = ""
    console.log(form.value)
    inventoryID.value = 0;
}
//编辑按钮
function bj(row) {
    inventoryID.value = row.inventoryID
    beverageID.value = row.beverageID
    dialogFormVisible.value = true;
    form.value = row;
}
//删除按钮
function sc(row) {
    console.log(row.inventoryID);
    axios({
        method: "delete",
        url: "https://localhost:7052/api/BeverageInven",
        params: {
            InventoryID: row.inventoryID,
        },
    }).then((res) => {
        if (res.status === 200) {
            ElMessage({
                message: "删除成功",
                type: "success",
            });
            xlcx()
            dialogFormVisible.value = false;
        } else {
            ElMessage({
                message: "删除失败",
                type: "waring",
            });
        }
        select();
    });
}
//添加编辑操作
function tianjia() {
    xingbiao.value.inventoryID = form.value.inventoryID
    xingbiao.value.beverageID = form.value.beverageName
    xingbiao.value.entryDate = form.value.entryDate
    xingbiao.value.quantity = form.value.quantity
    // 发起 POST 请求
    if (inventoryID.value == "0") {
        beverageID.value = form.value.beverageName
        axios
            .post(
                `https://localhost:7052/api/BeverageInven?BeverageID=${beverageID.value}`,
                xingbiao.value
            )
            .then((response) => {
                // 请求成功处理
                if (response.status === 200) {
                    ElMessage({
                        message: "添加成功",
                        type: "success",
                    });
                    xlcx()
                    dialogFormVisible.value = false;
                } else {
                    ElMessage({
                        message: "添加失败",
                        type: "waring",
                    });
                }
                select();
            });
    } else {

        console.log(beverageID.value);
        console.log("编辑");
        axios
            .put(
                `https://localhost:7052/api/BeverageInven?BeverageID=${beverageID.value}`,
                form.value
            )
            .then((response) => {
                if (response.status === 200) {
                    ElMessage({
                        message: "更新成功",
                        type: "success",
                    });
                    xlcx()
                    dialogFormVisible.value = false;
                } else {
                    ElMessage({
                        message: "更新失败",
                        type: "waring",
                    });
                }
                select();
            });
    }
}
function handleSizeChange() {
    select();
}
function handleCurrentChange() {
    select();
}
</script>
<style></style>